<template>
  <div style="margin-bottom:55px">
    <img class="user-poster" src="img/header.png">
    <van-row class="user-links">
      <router-link :to="{ name: 'list', params: { cate:1 }}">
        <van-col span="6">
          <van-icon name="video-o"/>电影
        </van-col>
      </router-link>

      <router-link :to="{ name: 'list', params: { cate:2 }}">
        <van-col span="6">
          <van-icon name="tv-o"/>电视剧
        </van-col>
      </router-link>

      <router-link :to="{ name: 'list', params: { cate:3 }}">
        <van-col span="6">
          <van-icon name="play-circle-o"/>综艺
        </van-col>
      </router-link>

      <router-link :to="{ name: 'list', params: { cate:4 }}">
        <van-col span="6">
          <van-icon name="smile-comment-o"/>动漫
        </van-col>
      </router-link>
    </van-row>

    <van-cell-group class="user-group" style="margin-bottom: 0px;">
      <van-cell icon="underway-o" title="观看历史" is-link/>
    </van-cell-group>
    <swiper :options="swiperOption" style="margin-bottom: 15px;">
      <swiper-slide v-for="vo in swipeList" :key="vo.cid">
        <router-link :to="{ name: 'view', params: { id: vo.cid }}">
          <div class="swipe" style="width:100%;height:180px;position:relative">
            <div style="width:100%;height:100%;position:absolute;left:0;z-index=999"></div>
            <!-- <img v-lazy="vo.image" style="width:100%;"> -->
            <iframe
              :src="'img.html?url='+vo.image"
              frameborder="0"
              scrolling="no"
              style="width:100%;height:180px"
            ></iframe>
            <div class="title">{{vo.title}}({{vo.item_title}})</div>
          </div>
        </router-link>
      </swiper-slide>
      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    </swiper>

    <van-cell-group class="user-group">
      <van-cell icon="notes-o" title="我的收藏" is-link/>
    </van-cell-group>
    <swiper :options="swiperOption" style="margin-bottom: 15px;">
      <swiper-slide v-for="vo in swipeStarList" :key="vo.cid">
        <router-link :to="{ name: 'view', params: { id: vo.cid }}">
          <div class="swipe" style="width:100%;height:180px;position:relative">
            <div style="width:100%;height:100%;position:absolute;left:0;z-index=999"></div>
            <!-- <img v-lazy="vo.image" style="width:100%;"> -->
            <iframe
              :src="'img.html?url='+vo.image"
              frameborder="0"
              scrolling="no"
              style="width:100%;height:180px"
            ></iframe>
            <div class="title">{{vo.title}}</div>
          </div>
        </router-link>
      </swiper-slide>
      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    </swiper>

    <van-cell-group>
      <van-cell icon="like-o" title="猜你喜欢" is-link/>
      <van-cell icon="delete" @click="clearData" title="清除缓存" is-link/>
    </van-cell-group>
  </div>
</template>

<script>
import { Row, Col, Icon, Cell, CellGroup, Dialog } from 'vant';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import Cache from '@/vendor/cache';

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Dialog.name]: Dialog,
    swiper,
    swiperSlide
  },
  data () {
    return {
      swipeList: [],
      swipeStarList: [],
      swiperOption: {
        autoplay: false,
        slidesPerView: 3,
        delay: 2000,
        spaceBetween: 12,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    };
  },
  mounted () {
    this.init();
  },
  methods: {
    clearData () {
      Dialog.confirm({
        title: '确定要清除缓存吗?',
        message: '将会删除你的观看历史与看单!'
      })
        .then(() => {
          localStorage.removeItem('recordJson');
          localStorage.removeItem('starJson');
          this.swipeStarList = [];
          this.swipeList = [];
        })
        .catch(() => {

        });
    },
    init () {
      let cache = new Cache();
      let list = cache.getAllRecord();
      for (let key in list) {
        let item = list[key];
        item['cid'] = key;
        this.swipeList.push(item);
      }
      this.swipeList.sort((a, b) => {
        return b['time'] - a['time'];
      });
      this.swipeList = this.swipeList.slice(0, 10);
      list = cache.getAllStar();
      for (let key in list) {
        let item = list[key];
        if (!item) continue;
        item['cid'] = key;
        this.swipeStarList.push(item);
      }
      this.swipeStarList.sort((a, b) => {
        return b['time'] - a['time'];
      });
      this.swipeStarList = this.swipeStarList.slice(0, 10);
    }
  }
};
</script>

<style lang="less">
.swipe {
  position: relative;
  .title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-overflow: ellipsis;
    color: #fff;
    text-align: center;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.user {
  &-poster {
    width: 100%;
    height: 53vw;
    display: block;
  }
  &-group {
    margin-bottom: 15px;
  }
  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
</style>
